<template>
  <div class="payable-details-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>

    <div class="content-wrapper">
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool> </template>
        <template #checkingStatus="{ row }">
          <span v-if="row.checkingStatus === 0">未对账</span>
          <span v-if="row.checkingStatus === 1">对账中</span>
          <span v-if="row.checkingStatus === 2">已对账</span>
        </template>
        <template #status="{ row }">
          <a-tag v-if="row.status === 1" color="#009688"> 已下单 </a-tag>
          <a-tag v-if="row.status === 5" color="#CD5C5C"> 已入仓 </a-tag>
          <a-tag v-if="row.status === 6" color="#FFE4E1"> 出库 </a-tag>
          <a-tag v-if="row.status === 7" color="#2db7f5"> 出仓 </a-tag>
          <a-tag v-if="row.status === 8" color="#108ee9"> 运输中 </a-tag>
          <a-tag v-if="row.status === 9" color="#87d068"> 签收 </a-tag>
          <a-tag v-if="row.status === -5" color="#f50"> 扣货 </a-tag>
          <a-tag v-if="row.status === 0" color="#9AFF9A"> 已取消 </a-tag>
        </template>
        <template #action="{ row }">
          <a-button type="link" @click="getInfoHandle(row)">详情</a-button>
        </template>
      </super-table>
    </div>

    <!-- 抽屉 -->
    <a-drawer class="custom-drawer" v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import Details from "./components/details/index.vue";
export default {
  name: "PayableDetails",
  components: {
    Details
  }
};
</script>
<script lang="ts" setup>
import { searchItemList, tableColumn } from "./data";
import TableHeightHook from "@/hook/tableHeightHook";

import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import ModalHook from "@/hook/modalHook";
const { tableHeight, loading } = TableHeightHook(45);
const { searchForm, tableData, tableRef, pageStat, drawerOpts } = InitHook();
const { drawerSubmitHandle } = ModalHook({
  drawerOpts,
  callBack: () => searchHandle
});
const { searchHandle, getData, getInfoHandle } = OperationHook({
  pageStat,
  searchForm,
  tableData,
  tableRef,
  loading,
  drawerOpts
});
searchHandle();
</script>
<style lang="stylus" scoped></style>
